<template>
  <!-- qrcode弹窗 -->
  <div class="qr-modal" v-if="popup" @touchmove.stop.prevent="moveStop">
    <div class="qr-hit-box">
      <div class="qr-wxcode">
        <div class="wxcode-tips">
          <p>长按识别</p>
          <p>关注后即可使用排盘</p>
        </div>
        <div class="qr-wxcode-box">
          <image style="width: 200px; height: 200px" :src="src"></image>
        </div>
      </div>
      <div class="qr-btn-box">
        <div class="qr-btn-close" @click="close">取消</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getGzhCodeApi, getWxUserInfoByopenIdApi } from "@/http/api";
export default {
  name: "customer-modal",
  data() {
    return {
      popup: false,
      src: "",
      wxInfo: {},
      timer: null,
    };
  },
  methods: {
    moveStop() {},
    open() {
      this.popup = true;
      getGzhCodeApi({
        type: uni.getStorageSync("channel") || 0,
        status: 1,
      }).then((res) => {
        if (res.code === 200) {
          this.src = res.data.imgUrl;
          // 轮巡是否关注
          this.checkConcern();
        }
      });
    },
    close(e) {
      this.popup = false;
      this.src = "";
      clearInterval(this.timer);
    },
    checkConcern() {
      this.wxInfo = uni.getStorageSync("wxInfo") || {};
      this.timer = setInterval(() => {
        getWxUserInfoByopenIdApi({
          openId: this.wxInfo.openid,
        }).then((res) => {
          if (res.code == 200) {
            uni.setStorageSync("wxInfo", res.data);
            if (res.data.state && res.data.state === 1) {
              // this.$store.commit("user/hasConcern");
              this.close();
            } else {
              this.$store.commit("user/cancelConcern");
            }
          }
        });
      }, 1500);
    },
  },
};
</script>

<style lang="scss" scoped>
.qr-modal {
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  max-width: 750px;
  z-index: 10000;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  left: var(--window-left);
}
.qr-hit-box {
  background-color: #fff;
  width: 80%;
  max-width: 414px;
  margin: auto;
  box-sizing: border-box;
  position: relative;
  
  padding: 33rpx 0 47rpx;
  .qr-wxcode {
    width: 100%;
    height: 40%;
    z-index: 50;
    bottom: 500rpx;
    text-align: center;
    .wxcode-tips {
      font-size: 30rpx;
      line-height: 34rpx;
      font-weight: bold;
      margin-bottom: 26rpx;
    }
    .qr-wxcode-box {
      width: 100%;
      height: 88%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .qr-canvas {
      width: 100%;
      height: 1rpx;
      overflow: hidden;
    }
  }
  .qr-btn-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 38rpx;
    .qr-btn-close {
      width: 180rpx;
      height: 49rpx;
      background-color: #c5a680;
      
      text-align: center;
      font-size: 32rpx;
      line-height: 49rpx;
      color: #ffffff;
    }
  }
}
</style>
